<template>
    <el-card>
        <el-card>
            <el-row class="form-row">
                <el-form :model="filters" label-position="right" inline ref="formInline">
                    <el-form-item label="公司名称">
                        <div class="filters-input" style="width: 250px;">
                            <treeselect :options="optionsDepart" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                        noResultsText="没有发现结果" :default-expand-level="1" placeholder="选择公司名称"
                                        @input="propertyChange" :show-count="true" v-model="filters.deptId"/>
                        </div>
                    </el-form-item>
                    <el-form-item label="角色名称">
                        <div class="filters-input">
                            <treeselect :options="roleTreeList" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                        noResultsText="没有发现结果" placeholder="选择角色" :show-count="true"
                                        :disable-branch-nodes="true" v-model="filters.id"/>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row class="form-row">
                <el-button type="primary" @click="addMenu()">新增</el-button>
            </el-row>
            <el-table stripe border :loading="tableLoading" :data="tableData" @expand-change="menuInfo" ref="table"
                      style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="可看菜单" prop="menuName"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="addMenu(scope.row)">修改
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </el-card>

        <el-dialog :close-on-click-modal="false" title="角色菜单管理" :visible.sync="roleConfig" width="900">
            <div class="pp-info">
                <el-form :model="role" :rules="rules" ref="roleForm" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="角色名称" prop="id">
                        <treeselect :options="roleTreeList" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                    noResultsText="没有发现结果" placeholder="选择角色" :show-count="true"
                                    :disable-branch-nodes="true" v-model="role.id"/>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="menuIdList">
                        <treeselect :options="treeList" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                    noResultsText="没有发现结果" placeholder="选择菜单名称" value-consists-of="ALL_WITH_INDETERMINATE"
                                    :multiple="true" :show-count="true" v-model="role.menuIdList"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="roleConfig = false">取 消</el-button>
                <el-button type="primary" :loading="formLoading" @click="surerole('roleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";

    export default {
        components: {
            Treeselect,
        },
        data() {
            return {
                //校验规则
                rules: {
                    id: [
                        {
                            required: true,
                            message: "请选择角色",
                        }
                    ],
                    menuIdList: [
                        {
                            required: true,
                            message: "请选择菜单",
                        }
                    ]
                },
                //查询条件
                filters: {},
                treeList: [],
                roleList: [],
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                tableData: [],
                houseList: [],
                //表单提交状态
                tableLoading: false,
                roleConfig: false,
                role: {},
                //角色树
                roleTreeList: [],
                value: null,
                roleTableLoading: false,
                subrole: [],
                //公司
                optionsDepart: [],
                formLoading:false,
            }
        },
        created: function () {
            this.loadDepart();
            this.getMenuTreeList();
        },
        methods: {
            //加载公司
            loadDepart() {
                this.postRequest("/api/user/treeList").then(res => {
                    if (res.code == 20000) {
                        this.optionsDepart = res.data;
                        this.filters.deptId = res.data[0].id;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //选择公司加载角色
            propertyChange(){
                this.loadData();
                this.roleTreeList = [];
                if(this.filters.deptId){
                    this.roleTree(this.filters.deptId);
                }
            },
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/sysRoleMenu/loadData", params).then(res => {
                    console.log(res)
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //选择父菜单，加载子菜单
            menuInfo(row, expandedRows) {
                if (expandedRows.length > 1) {
                    expandedRows.shift();
                }
                this.getRequest("/api/sysRoleMenu/getSubMenuList?parentId=" + row.id).then(res => {
                    console.log(res)
                    if (res.code == 20000) {
                        this.subrole = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载菜单树
            getMenuTreeList() {
                this.getRequest("/api/sysMenu/getMenuTreeList").then(res => {
                    console.log(res);
                    if (res.code == 20000) {
                        this.treeList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载角色树
            roleTree(deptId) {
                this.postRequest("/api/manageHR/getRoleTree?deptId="+ deptId).then(res => {
                    if (res.code == 20000) {
                        this.roleTreeList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //打开新增修改页面
            addMenu(row) {
                this.role = {};
                if (row) {
                    this.role = row;
                }
                this.roleConfig = true;
            },
            //保存新增修改
            surerole: function (roleForm) {
                this.$refs[roleForm].validate((valid) => {
                    if (valid) {
                        this.formLoading = true;
                        this.postRequest("/api/sysRoleMenu/saveOrUpdate", this.role).then(res => {
                            this.formLoading = false;
                            if (res.code == 20000) {
                                this.roleConfig = false;
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            //删除
            handleDelete(roleId) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/sysRoleMenu/delete?roleId=" + roleId).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            //查询
            handleQuery() {
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
<style lang="less" scoped>
    #pop {
        width: 780px;
        height: 600px;
        display: none;
        position: fixed;
        z-index: 10;
        top: 10%;
        left: 50%;
        margin-left: -390px;
    }
</style>
